<template>
  <div>
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- <div class="cart"> -->
      <!-- 标题栏 -->
      <div class="cartList" @click="addGoodsOne">
        <span>
          <van-icon name="shopping-cart-o" size="20"/>
        </span>
        <span>购物车</span>
      </div>
      <!-- 固定头部 -->
      <!-- <div class="goodsbox">
      <van-checkbox v-model="allChecked" icon-size="20px" checked-color="#D81E06"></van-checkbox>
      <van-card
        price="2.00"
        title="商品标题"
        thumb="https://img12.360buyimg.com/n2/s240x240_jfs/t1/110099/24/10701/108685/5e830a27E3d31f90f/f89816d264ae15c1.jpg!q70.jpg"
      ></van-card>
      <van-stepper v-model="value" integer input-width="40px" button-size="32px"></van-stepper>
      </div>-->
      <!-- 循环列表 -->
      <div class="goodsbox" v-for="(item) in $store.state.goodsListData" :key="item.id">
        <template>
          <!-- 复选框 -->
          <van-checkbox
            v-model="item.checked"
            @change="calculateTotalPrice"
            icon-size="20px"
            checked-color="#D81E06"
          ></van-checkbox>
          <!-- 商品卡片 -->
          <van-card
            :price="item.price"
            :title="item.title"
            :thumb="item.thumb"
            @click="redirect(item.id)"
          ></van-card>
          <!-- 删除商品按钮 -->
          <van-button type="danger" size="mini" @click="deleteGoods(item.id)">删除</van-button>
          <!-- 步进框 -->
          <van-stepper
            v-model="item.value"
            integer
            @change="calculateTotalPrice(item.id)"
            input-width="40px"
            button-size="32px"
          ></van-stepper>
        </template>
      </div>
      <!-- </div> -->
    </van-pull-refresh>
    <!-- 提交订单栏 -->
    <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="allChecked" @click="selectAll">全选</van-checkbox>
    </van-submit-bar>
    <!-- 预览窗遮罩 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsListData: [],
      goodsDetail: {
        message: {
          goods_id: 279,
          goods_price: 9999,
          goods_name: "666",
          goods_small_logo:
            "https://img10.360buyimg.com/mobilecms/s337x337_jfs/t1/103196/18/13046/326461/5e54fb8dE57f6b29e/00a862c06c024835.jpg!q70.dpg.webp"
        }
      },
      allChecked: false,
      value: 1,
      totalPrice: 0,
      goodsCount: 0,
      show: false,
      isLoading: false
    };
  },
  methods: {
    //提交订单
    onSubmit() {
      this.$store.commit("goBuy");
      if (this.$store.state.goBuyGoodsListData.length == 0) {
        this.$dialog({ message: "请选择要购买的商品，购买商品不能为空" });
        return;
      }
      this.$router.push("/order");
    },
    // 计算总价
    calculateTotalPrice(id) {
      //将原有价格清零
      this.totalPrice = 0;
      //计算总价
      this.$store.state.goodsListData.forEach((item, index) => {
        if (!item.checked) {
          return false;
        } else {
          this.totalPrice += item.value * item.price;
        }
      });

      //点击步进器时选中复选框
      this.$store.state.goodsListData.forEach((item, index) => {
        if (item.id == id) {
          var ax = index;
          this.$store.state.goodsListData[ax].checked = true;
        }
      });
      //为总价乘100
      this.totalPrice = this.totalPrice * 100;

      //判断全选是否选中
      this.allCheckedTest();
      this.$store.commit("savePage");
      this.$store.commit("calculateTotalGoods");
    },
    //全选处理
    selectAll() {
      this.allChecked = !this.allChecked;
      this.$store.state.goodsListData.forEach(item => {
        item.checked = this.allChecked;
      });
    },
    //点击商品跳转详情页
    redirect(id) {
      this.$router.push(`/pages/goods_detail/:${id}`);
    },
    //判断全选是否被选中的函数
    allCheckedTest() {
      if (this.$store.state.goodsListData.length == 0) {
        this.allChecked = false;
      } else {
        var test = this.$store.state.goodsListData.some(item => {
          return item.checked == false;
        });
        if (test) {
          this.allChecked = false;
        } else {
          this.allChecked = true;
        }
      }
    },
    //添加商品函数
    addGoodsOne() {
      this.$store.commit("addGoodsm", this.goodsDetail);
      this.calculateTotalPrice();
    },
    //删除商品函数
    deleteGoods(id) {
      this.$store.state.goodsListData.forEach((item, index) => {
        if (id == item.id) {
          this.$store.state.goodsListData.splice(index, 1);
        }
      });
      this.calculateTotalPrice();
      this.$store.commit("calculateTotalGoods");
    },
    //下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    }
  },
  created() {
    //刷新页面
    this.$store.commit("refreshPage");
  },
  mounted() {
    this.allCheckedTest();
    setTimeout(() => {
      this.calculateTotalPrice();
    }, 500);

    // 立即调用，没有数据，无法加载；直接打印this.goodsListData有数据，使用就没数据。
  },

  computed: {
    getTotalPrice() {
      return this.totalPrice;
    }
  }
};
</script>

<style lang="less" scoped>
.van-pull-refresh {
  height: calc(100vh - 50px);
}

.cartList {
  height: 45px;
  font-size: 24px;
  line-height: 45px;
  margin-top: 46px;
  // background-color: #1399fa;
  // background-color: greenyellow;
  > span {
    width: 24px;
    height: 24px;
    padding-left: 10px;
    overflow: hidden;
  }
}
.goodsbox {
  display: flex;
  position: relative;
  width: 100%;
  background-color: #fafafa;
  border-bottom: 1px solid red;
  .van-checkbox {
    margin: 0 10px;
  }
  .van-card {
    flex: 1;
    padding-left: 0;
  }
  .van-stepper {
    position: absolute;
    right: 10px;
    bottom: 0px;
  }
  .van-button {
    height: 22px;
    right: 10px;
    top: 16px;
  }
}
.van-submit-bar {
  bottom: 50px;
}
</style>